<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
  
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/js/bootstrap-fileinput/css/fileinput.min.css">
	<script src="/js/bootstrap-fileinput/js/fileinput.js"></script>
	<script src="/js/bootstrap-fileinput/js/locales/zh.js"></script>

    
    <!-- 富文本编辑器 -->
	<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
	<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
	<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>
    
    
      
    
    
</head>

<body class="hold-transition skin-red sidebar-mini" >
<form id="insertform">
            <!-- 正文区域 -->
            <section class="content"><div class="box-body">
				<!--tab页-->
				<div class="nav-tabs-custom">
					<!--tab头-->
					<ul class="nav nav-tabs">
						<li class="active">
							<a href="#home" data-toggle="tab">商品基本信息</a>
						</li>
						<li >
							<a href="#pic_upload" data-toggle="tab">商品图片</a>
						</li>
						<li >
							<a href="#customAttribute" data-toggle="tab">扩展属性</a>
						</li>
						<li >
							<a href="#spec" data-toggle="tab" >规格</a>
						</li>
					</ul>
					<!--tab头/-->

					<!--tab内容-->
					<div class="tab-content">
						<!--表单内容-->
						<div class="tab-pane active" id="home">
							<div class="row data-type">
								<div class="col-md-2 title">商品分类</div>

								<div class="col-md-10 data">
									<table>
										<tr>
											<td>
												<select class="form-control" id="select_one">
												</select>
											</td>
											<td>
												<select class="form-control select-sm" id="select_two">
												</select>
											</td>
											<td>
												<select class="form-control select-sm" id="select_three">
												</select>
											</td>
											<td>
												<input type="text" id="mubanid" name="mubanid" >
											</td>
										</tr>
									</table>
								</div>


								<div class="col-md-2 title">商品名称</div>
								<div class="col-md-10 data">
									<input type="text" class="form-control"  id="goodsname" name="goodsName" placeholder="商品名称" value="">
								</div>

								<div class="col-md-2 title">品牌</div>
								<div class="col-md-10 data">
									<select class="form-control" name="brandId" id="brandSelect"></select>
								</div>
								<div class="col-md-2 title">副标题</div>
								<div class="col-md-10 data">
									<input type="text" class="form-control" id="caption" name="caption" placeholder="副标题" value="">
								</div>

								<div class="col-md-2 title">价格</div>
								<div class="col-md-10 data">
									<div class="input-group">
										<span class="input-group-addon">¥</span>
										<input type="text" class="form-control" name="price" placeholder="价格" value="">
									</div>
								</div>

								<div class="col-md-2 title editer">商品介绍</div>
								<div class="col-md-10 data editer">
									<textarea id="introduction" name="introduction" style="width:800px;height:400px;visibility:hidden;"  ></textarea>
								</div>

								<div class="col-md-2 title rowHeight2x">包装列表</div>
								<div class="col-md-10 data rowHeight2x">
									<textarea rows="4"  class="form-control" name="packageList" id="packageList" placeholder="包装列表"></textarea>
								</div>

								<div class="col-md-2 title rowHeight2x">售后服务</div>
								<div class="col-md-10 data rowHeight2x">
									<textarea rows="4"  class="form-control" id="saleService" name="saleService"  placeholder="售后服务"></textarea>
								</div>


							</div>
						</div>

						<!--图片上传-->
						<div class="tab-pane" id="pic_upload">
							<div class="row data-type">
								<!-- 颜色图片 -->
								<div class="btn-group">
									<button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"  data-toggle="modal"  ><i class="fa fa-file-o"></i> 新建</button>

								</div>

								<table class="table table-bordered table-striped table-hover dataTable">
									<thead>
									<tr>

										<th class="sorting">颜色</th>
										<th class="sorting">图片</th>
										<th class="sorting">操作</th>
									</thead>
									<tbody  id="ciBody">
									<!--<tr>
										<td>

										</td>
										<td>
											<img alt="" src="" width="100px" height="100px">
										</td>
										<td> <button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>
									</tr>-->
									</tbody>
								</table>

							</div>
						</div>


						<!--扩展属性-->
						<div class="tab-pane" id="customAttribute">
							<div class="row data-type" id="extension">
								<!--<div>
									<div class="col-md-2 title">
										<input type="text" id="extension1" >
									</div>
									<div class="col-md-10 data">
										<input class="form-control" placeholder="扩展属性1">
									</div>
								</div>-->
							</div>
						</div>
						<!--规格-->
						<div class="tab-pane" id="spec">
							<div class="row data-type">
								<div class="col-md-2 title">是否启用规格</div>
								<div class="col-md-10 data">
									<input type="checkbox" id="guigeId" onchange="specTF()">
								</div>
							</div>
							<p>

							<div>

							<div class="row data-type" id="specDiv">

								<!--<div name="specificationName">
									<div class="col-md-2 title">屏幕尺寸</div>
									<div class="col-md-10 data">

										<span>
											<input  type="checkbox" >4.0
										</span>
										<span>
											<input  type="checkbox" >4.5
										</span>
										<span>
											<input  type="checkbox" >5.0
										</span>

									</div>
								</div>-->
							</div>

							<div class="row data-type">
								<table class="table table-bordered table-striped table-hover dataTable">
										<thead id="specName">
										<thead >
									<tbody id="specTable">
									<!--<tr>
										<td>
											4.0
										</td>
										<td>
											3G
										</td>
										<td>
											<input class="form-control"  placeholder="价格">
										</td>
										<td>
											<input class="form-control" placeholder="库存数量">
										</td>
										<td>
											<input type="checkbox" >
										</td>
										<td>
											<input type="checkbox" >
										</td>
									</tr>-->
									</tbody>
								</table>
							</div>

						</div>
						</div>
					</div>
				</div>
			</div>
				<div class="btn-toolbar list-toolbar">
					<button class="btn btn-primary" onclick="insertGoods()"><i class="fa fa-save"></i>保存</button>
					<button class="btn btn-default" >返回列表</button>
				</div></section>
            
            
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">上传商品图片</h3>
		</div>
		<div class="modal-body">							
			
			<table class="table table-bordered table-striped">
		      	<tr>
		      		<td>颜色</td>
		      		<td><input  class="form-control" placeholder="颜色" id="addColor">  </td>
		      	</tr>			    
		      	<tr>
		      		<td>商品图片</td>
		      		<td>
						<table>
							<tr>
								<td>
									<input type="hidden"  id="addImg">
									<input type="file" name="myFile" id="myFile" multiple>
					            </td>
								<td id="imgTB">

								</td>
							</tr>						
						</table>
		      		</td>
		      	</tr>		      	
			 </table>				
			
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success"  data-dismiss="modal" aria-hidden="true" onclick="colorImg()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
	<input type="hidden" id="wogan">
</form>

</body>

</html>
<script type="text/javascript">

	function colorImg(){
		if($("#addColor").val().length <= 0){
			alert("请填写颜色");
			return ;
		}
		if($("#addImg").val().length <= 0){
			alert("请上传图片");
			return ;
		}
		var table = ''
			table += '<tr>'
			table += '<td name="goodsColor">'+' '+$("#addColor").val()+'</td>'
			table += '<td>'
			table += '<input type="hidden" name="goodsImg" value="'+$("#addImg").val()+'">'
			table += '<img src="'+$("#addImg").val()+'" width="100px" height="100px">'
			table += '</td>'
		table += '<td> <button type="button" class="btn btn-default" title="删除" onclick="removeTr(this)"><i class="fa fa-trash-o"></i> 删除</button></td>'
	table += '</tr>'
		$("#ciBody").append(table);/*不能用html会覆盖*/
	}
	function removeTr(obj){
			$(obj).parents("tr:first").remove();
	}


	$(function () {
		getdata(0);

		$('#myFile').fileinput({
			language: 'zh', //设置语言
			uploadUrl: "/imgController/addImg", //上传的地址
			allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀,
			maxFileCount: 100,
			enctype: 'multipart/form-data',
			showUpload: true, //是否显示上传按钮
			showCaption: false,//是否显示标题
			browseClass: "btn btn-primary", //按钮样式
			previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
			msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
		}).on('fileuploaded',function (event,data,previewId,index){
			if(data.response != null){
				if(data.response.code == 100){
					$("#addImg").val(data.response.data);
				}

				if(data.response.code == 101){
					alert(data.response.data);
				}

			}
		})


	})
	/*第一级*/
	function getdata(id) {
		$.ajax({
			url:"/SelleritemController/selectsjld?id="+id,
			type:"post",
			dataType:"json",
			success:function (list) {
				let elementById = document.getElementById("select_one");
				var str = list.data;
				$("#template").val(str[0].typeId);
				var arr = '<option>请选择</option>';
				for (var i = 0;i < str.length; i++){
					arr += '<option onclick="getsjlds('+str[i].id+')">'+str[i].name+'</option>';
				}
				elementById.innerHTML = arr;
			},
			error:function () {
				alert("代码错误")
			}
		})
	}
	/*第二级*/
	function getsjlds(id) {
		$.ajax({
			url:"/SelleritemController/selectsjld?id="+id,
			type:"post",
			dataType:"json",
			success:function (list) {
				let elementById = document.getElementById("select_two");
				var str = list.data;
				var arr = '<option>请选择</option>';
				for (var i = 0;i < str.length; i++){
					arr += '<option onclick="getsjldss('+str[i].id+')">'+str[i].name+'</option>';
				}
				elementById.innerHTML = arr;
			},
			error:function () {
				alert("代码错误")
			}
		})
	}
	/*第三级*/
	function getsjldss(id) {
		$.ajax({
			url:"/SelleritemController/selectsjld?id="+id,
			type:"post",
			dataType:"json",
			success:function (list) {
				let elementById = document.getElementById("select_three");
				var str = list.data;
				var arr = '<option>请选择</option>';
				for (var i = 0;i < str.length; i++){
					arr += '<option onclick="getsjldsss('+str[i].id+')">'+str[i].name+'</option>';
				}
				elementById.innerHTML = arr;
			},
			error:function () {
				alert("代码错误")
			}
		})
	}

	/*第三级*/
	function getsjldsss(id) {
		$.ajax({
			url:"/SelleritemController/selectByid?id="+id,
			type:"post",
			dataType:"json",
			success:function (list) {
				let fours = document.getElementById("select_four");
				var str = list.data;
				$("#mubanid").val(str.typeId);
				var strs = str.typeId;
				gettemplate(strs);
				$("#wogan").val(id);
			},
			error:function () {
				alert("代码错误")
			}
		})
	}

	function gettemplate(id) {
		$("#guigeId").val(id);
		$.ajax({
			url:"/SelleritemController/gettemplate?id="+id,
			type:"post",
			dataType:"json",
			success:function (list) {
				var str = list.data.tbTypeTemplate;
				let parse = JSON.parse(str.brandIds);
				let cai = JSON.parse(str.customAttributeItems);

				let parse1 = list.data.specVOS;
				var brandIds = "";
				for (var i = 0;i < parse.length;i++){
					brandIds += '<option id="pinpaiid" value="'+parse[i].id+'">'+parse[i].text+'</option>'
				}
				var cais = "";
				for(var a = 0;a < cai.length; a++){
					cais += '<div>';
					cais += '<div class="col-md-2 title">'+cai[a].text+'</div>'
					cais += '<div class="col-md-10 data">'
					cais += '<input class="form-control" placeholder="扩展属性'+a+'">'
					cais += '</div>'
					cais += '</div>';
				}
				/*var si = "";
				for(var j = 0; j< parse1.length;j++){
					si += '<div name="specificationName">'
					si += '<div class="col-md-2 title">'+parse1[j].text+'</div>'
					si += '<div class="col-md-10 data">'
					for (var n = 0;n<parse1[j].optionList.length;n++){
						si += '<span>'
						si += '<input  type="checkbox" id="'+parse1[j].optionList[n].id+'">'+parse1[j].optionList[n].optionName+''
						si += '</span>'
					}
					si += '</div>'
					si += '</div>'
				}*/
				$("#brandSelect").html(brandIds);
				//$("#specDiv").html(si);
				$("#extension").html(cais);
			},
			error:function () {
				alert("代码错误")
			}
		})
	}

	/*增加*/
	function insertGoods() {
		editor.sync();
		var introduction = $("#introduction").val();

		let children = $("#extension").children();

		var  custom_attribute_items = [];

		for(var i = 0; i < children.length; i++){
			var text = $(children[i]).children(":first").text();
			var value = $(children[i]).find("input").val();
			custom_attribute_items.push({text:text,value:value});
		}
		/*图片增加*/
		var goodsColor = $("[name=goodsColor]").text();
		var goods = goodsColor.substring(1).split(' ');
		var image = '';
		var ci = []
		$("input[name=goodsImg]").each(function (i,e){
			if(i == 0){
				image = $(e).val();
			}
			ci.push({color:goods[i],url:$(e).val()})
		})

		var itemImages = JSON.stringify(ci);
		var customAttributeItems = JSON.stringify(custom_attribute_items);
		alert(customAttributeItems)

		/*规格*/
		var specList = $("#specDiv").children();
		var specification_items = [];
		for(var i = 0 ; i < specList.length; i++){
			var attributeName = $(specList[i]).children(":first").text();
			var attributeValue = [];
			$(specList[i]).find("input:checked").each(function (i,e){
				attributeValue.push($(e).val());
			})
			specification_items.push({attributeName:attributeName,attributeValue:attributeValue});
		}
		var specificationItems = JSON.stringify(specification_items);

		var items = [];
		var itemList = $("#specTable").children();
		var speclist = $("#specName").children(":first");
		var specName = $(speclist).children();
		for(var i = 0; i < itemList.length; i++){
			var specList = $(itemList[i]).find("select[name=spec]");
			var title = "";
			var spec = {};
			for(var j= 0; j < specList.length; j++ ){
				title += specList[j].value;
				var key = $(specName[j]).text();
				var value = specList[j].value;
				spec[key] = value;
			}
			title += $("input[name = goodsName]").val();
			var price =$(itemList[i]).find("input[name=price]").val();
			var num = $(itemList[i]).find("input[name=num]").val();
			var categoryId = $("#three").val();
			items.push({title:title,sellPoint:introduction,price:price,num:num,categoryid:categoryId,status:1,spec:spec,createTime:new Date(),updateTime:new Date(),image:image});
			var itemString =JSON.stringify(items);
		}

		$.ajax({
			url:"/SelleritemController/insertGoods?introduction="+introduction,
			type:"post",
			data:$("#insertform").serialize()+ "&customAttributeItems=" + customAttributeItems + "&itemImages="+itemImages+"&specificationItems=" + specificationItems+"&itemString=" +itemString,
			dataType:"json",
			async:false,
			success:function (list) {
				console.log(list)

			},
			error:function () {
				alert("代码错误")
			}
		})
	}

	var editor;
	KindEditor.ready(function(K) {
		editor = K.create('textarea[name="introduction"]', {
			allowFileManager : true
		});
	});

	function specTF() {
		var id = $("#guigeId").val();
		$.ajax({
			url:"/SelleritemController/gettemplate?id="+id,
			type:"post",
			dataType:"json",
			success:function (list) {
				let parse1 = list.data.specVOS;
				var si = "";
				for(var j = 0; j< parse1.length;j++){
					si += '<div name="specificationName">'
					si += '<div class="col-md-2 title">'+parse1[j].text+'</div>'
					si += '<div class="col-md-10 data">'
					for (var n = 0;n<parse1[j].optionList.length;n++){
						si += '<span>'
						si += '<input  type="checkbox" name="spec'+j+'" onchange="specBox()" value="'+parse1[j].optionList[n].optionName+'">'+parse1[j].optionList[n].optionName+''
						si += '</span>'
					}
					si += '</div>'
					si += '</div>'
				}
				$("#specDiv").html(si);
			},
			error:function () {
				alert("代码错误")
			}
		})
	}
	function specBox(){
			var s = $("#specDiv").children();
			$("#specTable").children().remove();
			if($(s).find("input:checked").length > 0){
				var spec = ''
				spec += '<tr>'
				for(var i = 0; i < s.length; i++){
					if($(s[i]).find("input:checked").length > 0){
						spec += '<th class="sorting">'+$(s[i]).children(":first").text()+'</th>'
					}
				}
				spec += '<th class="sorting">价格</th>'
				spec += '<th class="sorting">库存</th>'
				spec += '<th class="sorting">是否启用</th>'
				spec += '<th class="sorting">是否默认</th>'
				spec += '</tr>'
				$("#specName").html(spec);
				var specTable = ''
				specTable += '<tr>'
				var b = 1;
				for(var i = 0; i < s.length; i++){
					b *= $("[name=spec"+i+"]:checked").length;
					if($(s[i]).find("input:checked").length > 0){
						specTable += '<td>'
						specTable += '<select name="spec">'
						$("[name=spec"+i+"]:checked").each(function (i,e){
							specTable += '<option value="'+$(e).val()+'">'+$(e).val()+'</option>'
						})
						specTable += '</select>'
						specTable += '</td>'
					}

				}
				specTable += '<td><input class="form-control" name="price"  placeholder="价格"></td>'
				specTable += '<td><input class="form-control" name="num" placeholder="库存数量"></td>'
				specTable += '<td><input type="checkbox" name="using" ></td>'
				specTable += '<td><input type="checkbox" name="isDefault"></td>'
				if(b > 0){
					for(var i = 0; i < b; i++){
						$("#specTable").append(specTable);
					}
				}else {
					$("#specTable").append(specTable);
				}


			}else {
				$("#specName").children().remove();
			}


	}

</script>